<!DOCTYPE html>
<html style="height: 100%;">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>沙盘图纸</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min.css" rel="stylesheet">      
    <link href="css/style.css" rel="stylesheet">
</head>
<style>
	.table{empty-cells:show;border-collapse:collapse;border-spacing:0;float: left;}
</style>
	<body style="background: #fff;overflow: scroll;position:relative;">
		<div class="tuzhi-content" id="app">
			<img src="img/fenxi_01.jpg"/>
			<div class="tuzhione clearfix" style="padding: 0;">
				<div class="tuzhisec-sec">
					<div class="box-list" v-for="el in data.FenXi">
						<div class="titlecontent">
							<p>用户洞察 User Insight:</p>
							<input type="text" v-on:blur="post"   name="" v-model="el.User" id="" value="" />
						</div>
						<div class="testcontent">
							<p>来源Source:</p>
							<textarea name="" v-on:blur="post" rows="" v-model="el.Source" cols=""></textarea>
						</div>
					</div>						
				</div>
			</div>	
		</div>
	
	</body>
    <script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
	<script src="../js/all.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>	
	<script>
		var model= new Vue({
			el:"#app",
			data:{
				use:ComFunJS.getQueryString('use'),		
				teamId:ComFunJS.getQueryString('teamId'),	
				data:{
					FenXi:[
						{
							User:"",
							Source:"",
						},
						{
							User:"",
							Source:"",
						},		
						{
							User:"",
							Source:"",
						},
						{
							User:"",
							Source:"",
						},
						{
							User:"",
							Source:"",
						},
						{
							User:"",
							Source:"",
						},
						{
							User:"",
							Source:"",
						},
						{
							User:"",
							Source:"",
						}					
					]
				},					
			},
			methods:{
				getlocation:function(){
					if(localStorage.getItem('fenxi')!=''){
						model.data=JSON.parse(localStorage.getItem('fenxi'))
					}
				},
				post:function(){
					localStorage.setItem('fenxi',JSON.stringify(model.data))
				},
	            initWebSocket(teamId){ //初始化weosocket
	                //ws地址
	                const wsuri = ComFunJS.WEBSORCTAPIURL("/webSocketServer/"+this.teamId) ;
	                this.websock = new WebSocket(wsuri);
	                this.websock.onmessage = this.websocketonmessage;
	                this.websock.onclose = this.websocketclose;
	            },
	            websocketonmessage(e){ //数据接收
	            	var _this=this;
	            	if(e!=undefined){
		            	var redata =JSON.parse(e.data);
						model.data=JSON.parse(redata.teamdraw.content);	            		
	            	}
	            },
	            websocketclose(e){  //关闭
	                console.log("connection closed (" + e.code + ")");
	            }					
			},
			mounted:function(){
				this.$nextTick(function(){
					if(model.use==0){
						model.getlocation();
						this.initWebSocket();
						this.websocketonmessage();
						$('input').attr('readonly','')
						$('textarea').attr('readonly','')							
					}						
				})
			}	
		})

	</script>
</html>
